<template>
	<view class="">
		<u-navbar :is-back="true" title="课表详情" back-icon-color="#ffffff" :background="{backgroundColor:'#E62131'}"
			title-color="#ffffff"></u-navbar>
		<view class="listCenter">
			<view class="cardlist">
				<view class="topcen fliexs space_between">
					<view class="titlesleft">
						{{detail.classDate}} {{detail.classStartTime}}~{{detail.classEndTime}}
					</view>
					<!-- <u-icon @click="modalactive(index)" name="arrow-right" color="#a7a7a7" size="30"></u-icon> -->
				</view>
				<view class="border_color" style="font-size: 30rpx;font-weight: bold;padding: 20rpx 0;">
					{{detail.courseName ||''}}
				</view>
				<view class="centerlist" style="padding-top: 30rpx;">
					<u-icon name="account-fill" color="#a7a7a7" size="30"></u-icon> <span style="padding-left: 10rpx;">
						{{detail.coachName}}
					</span>
				</view>
				<view class="centerlist">
					<u-icon name="minus-circle-fill" color="#a7a7a7" size="30"></u-icon> <span
						style="padding-left: 10rpx;">
						{{detail.classInfo.name}}
					</span>
				</view>

				<view class="btnlist fliexs space_between">
					<view class="fliexs">
						<u-icon name="order" color="#a7a7a7" size="30"></u-icon>
						<span style="padding-left: 10rpx;">
							{{detail.workOut.classHours}}课时
						</span>

					</view>
				</view>
				<view class="btnlist fliexs space_between">
					<view class="fliexs">
						<u-icon name="map-fill" color="#a7a7a7" size="30"></u-icon>
						<span style="padding-left: 10rpx;">
							{{detail.campusName}}
						</span>

					</view>
				</view>
			</view>

			<view class="centerss">
				<view class="all_cards cardlistas fles">
					<div class="listscenter fliexs space_between" @click="topages">
						<view class="lefts">
							<image class="imsc" src="../../static/images/ketangbaogao.png" mode=""></image>
							<span>课堂报告</span>
							<span class="texxta colrsad" v-if="detail.commentTime">已查询</span>
							<span class="texxta" v-else>未发布</span>
						</view>
						<u-icon v-if="detail.commentTime" name="arrow-right" color="#707070" size="34"></u-icon>
						<span v-else style="color: #e1e1e1;">老师尚未发布报告</span>

					</div>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				detail: null,
			}
		},
		onReachBottom() {

		},
		onLoad(option) {
			this.id = option.id
		},
		onShow() {
			this.endkecheng()
		},
		methods: {
			endkecheng() {
				uni.$api.common.studentworkDetail(this.id).then((res) => {
					this.detail = res.result
				});
			},
			topages(){
				if(this.detail.commentTime){
					uni.navigateTo({
						url:"./classroomDetail?id=" + this.id
					})
				}
				
			},

		}
	};
</script>

<style lang="scss">
	.listCenter {
		padding: 30rpx;

		.topcen {
			.titlesleft {
				.canghs {
					display: inline-block;
					padding: 2rpx 6rpx;
					border-radius: 4rpx;
					background-color: #E62131;
					color: #ffffff;
					font-size: 24rpx;
					margin-right: 10px;
				}

				.weishnagke {
					margin-left: 10rpx;
					display: inline-block;
					padding: 5rpx 12rpx;
					border-radius: 10rpx;
					border: 1rpx solid #E62131;
					color: #E62131;
					font-size: 20rpx;
				}
			}
		}

		.centerlist {
			margin: 0rpx 0 10rpx;
			color: #b1b1b1;
		}

		.btnlist {
			color: #b1b1b1;
		}
	}

	.border_color {
		border-bottom: 1rpx solid #e1e1e1;
	}

	.cardlist {
		padding: 20rpx;
		border-radius: 8rpx;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
	}



	.listads {
		background-color: #ffffff;
		position: relative;
		top: -55rpx;
		left: 0;
		right: 0;
		padding: 20rpx 50rpx;

		.listcenter {
			text-align: center;

			.imgadfs {
				width: 70rpx;
				height: 70rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.cardlistas {
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.titles {
			font-weight: bold;
			font-size: 30rpx;
			margin-top: 30rpx;
		}

		.textcet {
			padding: 10rpx 0;
		}

		.cityopt {
			display: flex;

			.rightcity {
				.cityname {
					font-size: 34rpx;
				}

				.details {
					font-size: 28rpx;
					color: #D2CCCC;
				}
			}
		}

		.dates {
			color: #707070;
			display: flex;
			align-items: center;
			padding: 0 20rpx 0;
			padding-top: 20rpx;

			.spans {
				padding-left: 5rpx;
			}
		}

		.dalist {
			color: #707070;
			display: flex;
			align-items: center;
			padding: 0 20rpx 0;
			padding-top: 20rpx;

			.testone {
				padding: 0 5px;
			}

			.prices {
				color: #000000;
			}
		}
	}
	.fles {
	
		.listscenter {
			// border-bottom: 1rpx solid #E9E9E9;
			font-size: 32rpx;
			// padding: 20rpx 0;
	
			.lefts {
				color: #707070;
				display: flex;
				align-items: center;
				.imsc{
					margin-right: 10rpx;
					width: 35rpx;
					height: 35rpx;
				}
			}
		}
	}
	.texxta{
		display: inline-block;
		padding: 1rpx 5rpx;
		border-radius: 10rpx;
		border: 1rpx solid #e1e1e1;
		font-size: 22rpx;
		margin-left: 20rpx;
	}
	.colrsad{
		color: #E62131;
		border-color: #E62131;
	}
</style>